
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>map.borderWatcher()</title>

<style type="text/css">

body {
  font-family: Arial; font-size: small;
  background-color: #CCCCFF;
}

#forehead {
  background-color: #CCCCFF;
  text-align:left;
  margin-left: 20px;
}

#novel {
  width:400px; 
  margin:20px;
  float:right;
}

#AdSense {
  margin:20px;
}

A:hover {
  color: red;
  text-decoration: underline overline;
}

td {
  vertical-align:top;
}







.map {
  border: 6px solid silver;
  margin: 20px;
}

.border-watcher-top {
  border-top: 6px solid blue;
}

.border-watcher-right {
  border-right: 6px solid blue;
}

.border-watcher-bottom {
  border-bottom: 6px solid blue;
}

.border-watcher-left {
  border-left: 6px solid blue;
}


</style>

<script 
src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAYxpy0HiKBWXiyhVrpVqkshTzRM_GTxWOqTaXXRScn8KwUCiJWhT96ZS2MOLTq-SEmmJL1_cNrib9tA" type="text/javascript">
</script>

<script src="borderwatcher.js" type="text/javascript"> </script>

</head>
<body onunload="GUnload()">


<table>
  <tr>
    <td>
      <div id="forehead"><h2> Esa's Google Maps API experiments.</h2></div>
    </td>
    <td>

    </td>
  </tr>
  <tr>
    <td>


      <div id="map" class="map" style="width: 512px; height: 512px"></div>


    </td>
    <td rowspan="2">
      <div id="novel">


	  
<h3>map.borderWatcher()</h3>

<p>Drag the map. The border color should change when a marker goes outside the map.</p>

<p>borderWatcher() is a GMap2() method to test if a GLatLngBounds() object crosses maps viewport borders. It is an extension for Google Maps Api.</p>

<p>The method adds css-classnames to maps container element and returns an array of four booleans [top, right, bottom, left].</p>

<p>In this page <code>map.borderWatcher(markerBounds)</code> tests if markers fit into viewport. If they fit, nothing happens. If not, one or more of the returned booleans will be true and corresponding classnames added.</p>

<p>The returned booleans are not used for anything in this example but you can give birth for some ideas.</p>

<p>There are four css classnames for highlighting, one for each border. Defaults are<code>  "border-watcher-top", "border-watcher-right", "border-watcher-bottom", "border-watcher-left"</code>.</p>

<p>You, as a CSS guru, can make much more fascinating borders than those in my example.</p>

<p>To start testing, download the <a href="borderwatcher.js">borderwatcher.js</a> code and
add <code>&lt;script src="borderwatcher.js" type="text/javascript"&gt; &lt;/script&gt;</code> to your html after the maps.api script tag.</p>

<p>Upload the borderwatcher.js code to your serverspace. By hotlinking you accept any kind of stunning surprises on your page.</p>


<p><a href="http://hypermarker.googlepages.com/borderwatcher">More</a></p> 




      </div>

    </td>
  </tr>
  <tr>
    <td>
      <div id="AdSense">
	  
<script type="text/javascript"><!--
google_ad_client = "pub-3649938975494252";
google_ad_width = 468;
google_ad_height = 60;
google_ad_format = "468x60_as";
google_ad_type = "text_image";
google_ad_channel ="2676021345";
google_color_border = "CCCCFF";
google_color_bg = "CCCCFF";
google_color_link = "0000CC";
google_color_url = "008000";
google_color_text = "000000";
//--></script>

<script type="text/javascript"
  src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>

      </div>
    </td>
  </tr>
</table>


<script type="text/javascript">


/**
* Map
*/

var map = new GMap2(document.getElementById("map")); 
map.setCenter(new GLatLng(60.169879 ,24.938408), 13);
map.addControl(new GLargeMapControl());
var keyboard = new GKeyboardHandler(map);



/**
 * Classic 10 random markers  now equipped with bounds
 * var markerBounds is a GatLngBounds() that contains the ten markers
 */
 
var markerBounds = new GLatLngBounds();
var bounds = map.getBounds();
var southWest = bounds.getSouthWest();
var northEast = bounds.getNorthEast();
var lngSpan = northEast.lng() - southWest.lng();
var latSpan = northEast.lat() - southWest.lat();
for (var i=0; i<10; i++){
  var point = new GLatLng(southWest.lat() + latSpan * Math.random(),
						  southWest.lng() + lngSpan * Math.random());			  
  map.addOverlay(new GMarker(point));
  markerBounds.extend(point);
}



/**
* map.borderWatcher() is called by map 'move' event in this example
* Usually it is wiser to use 'moveend' event
* markerBounds is given as the mandatory parameter
* See also CSS in top of the source code
*/

GEvent.addListener(map,'move',function(){
  map.borderWatcher(markerBounds);
});


</script>

</body>
</html>